<template>
  <div class="pu">
    <div class="pu1">
      <div class="pu2">
        <div class="pu3">淘物优品发布</div>
      </div>
      <div class="pu4">今天您有什么闲置宝贝想要出售</div>
    </div>
    <div class="pu5">
      <div class="pu6">
        <div class="pu7">*为必填项目</div>
        <div>
          <!-- <el-form ref="addGoods" :model="addGoods">
            <el-form-item>
              <el-input
                prefix-icon="el-icon-user-solid"
                placeholder="请输入商品名称"
                v-model="addGoods.goodsName"
              />
            </el-form-item>

            <el-form-item>
              <el-input
                prefix-icon="el-icon-user-solid"
                placeholder="请输入商品数量"
                v-model.number="addGoods.goodsCount"
              />
            </el-form-item>

            <el-form-item>
              <el-input
                prefix-icon="el-icon-user-solid"
                placeholder="请输入商品类型"
                v-model.number="addGoods.goodsType"
              />
            </el-form-item>

           

            <el-form-item>
              <el-input
                prefix-icon="el-icon-s-opportunity"
                placeholder="请输入商品价格"
                v-model="addGoods.goodsPrice"
              />
            </el-form-item>

            <el-form-item>
              <el-input
                prefix-icon="el-icon-user-solid"
                placeholder="请输入商品简介"
                v-model="addGoods.goodsDesc"
              />
            </el-form-item>

            <el-form-item>
              <el-input
                prefix-icon="el-icon-user-solid"
                placeholder="请输入店铺名称"
                v-model="addGoods.shopName"
              />
            </el-form-item>

            <el-form-item>
              <el-input
                prefix-icon="el-icon-s-opportunity"
                placeholder="商品代码"
                v-model="addGoods.goodsCode"
              />
            </el-form-item>

            <el-form-item>
              <el-button @click="submit" class="loginbtn" type="primary">
                添加商品
              </el-button>
            </el-form-item>
          </el-form> -->
        </div>
        
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
          class="pu11"
        >
          <div class="pu8"><img src="../../assets/images/发布页1.jpg" /></div>
          <el-tab-pane label="发布闲置" name="first" class="pu9">
            <el-form  :model="addGoods" label-width="80px" :rules="rules">
              <el-form-item label="*宝贝名称" prop="name">
                <el-input v-model="addGoods.goodsName" class="name"></el-input>
              </el-form-item>
              <el-form-item label="*宝贝价格" prop="price">
                <el-input
                  v-model.number="addGoods.goodsPrice"
                  class="name"
                ></el-input>
              </el-form-item>
              <el-form-item label="*宝贝数量" prop="price">
                <el-input
                  v-model.number="addGoods.goodsCount"
                  class="name"
                ></el-input>
              </el-form-item>
              <el-form-item label="*店铺名称" prop="desc">
                <el-input
                  v-model="addGoods.shopName"
                  class="desc"
                ></el-input>
              </el-form-item>
              <el-form-item label="*商品类型" prop="desc">
                <el-input
                  v-model="addGoods.goodsType"
                  class="desc"
                ></el-input>
              </el-form-item>
              <el-form-item label="*商品代码" prop="desc">
                <el-input
                  v-model="addGoods.goodsCode"
                  class="desc"
                ></el-input>
              </el-form-item>
              <el-form-item label="*宝贝描述" prop="desc">
                <el-input
                  type="textarea"
                  v-model="addGoods.goodsDesc"
                  class="desc"
                ></el-input>
              </el-form-item>
              <!-- <el-form-item label="宝贝图片">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </el-form-item> -->
              <el-form-item class="pu10">
                <el-button @click="back" type="info">返回</el-button>
                <el-button type="primary" @click="submit"
                  >发布商品</el-button
                >
                <!-- <el-button @click="resetForm('form')">重置</el-button> -->
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>

      </div>
    </div>
  </div>
</template>

<script>
import { addGoodsAPI } from "@/api";
export default {
  name: "publish",
  data() {
    var goodsName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("标题不能为空"));
      }
    };
    var goodsDesc = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("描述不能为空"));
      }
    };
    var goodsPrice = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("价格不能为空"));
      }
    };
    return {
      rules: {
        goodsName: [{ validator: goodsName, trigger: "blur" }],
        goodsDesc: [{ validator: goodsDesc, trigger: "blur" }],
        goodsPrice: [{ validator: goodsPrice, trigger: "blur" }],
      },
      activeName: "first",
      dialogImageUrl: "",
      dialogVisible: false,
      addGoods: {
        uid: parseInt(sessionStorage.getItem("uid")),
        gid: 0,
        rid:0,
        goodsName: "",
        goodsCount: "",
        goodsType: "",
        goodsImg: "",
        goodsPrice: "",
        goodsDesc: "",
        shopName: "",
        goodsCode: "",
      },
      // uid: parseInt(sessionStorage.getItem("uid")),
    };
  },

  methods: {
    back() {
      this.$router.push("/");
    },
    async submit() {
      let data = new FormData();
      data.append("uid", this.addGoods.uid);
      data.append("gid", this.addGoods.gid);
      data.append("goodsName", this.addGoods.goodsName);
      data.append("goodsCount", this.addGoods.goodsCount);
      data.append("goodsType", this.addGoods.goodsType);
      data.append("goodsImg", this.addGoods.goodsImg);
      data.append("goodsPrice", this.addGoods.goodsPrice);
      data.append("goodsDesc", this.addGoods.goodsDesc);
      data.append("shopName", this.addGoods.shopName);
      data.append("goodsCode", this.addGoods.goodsCode);
      const addGoodsRes = await addGoodsAPI(data);
      if (addGoodsRes.data.statusCode === 200) {
        this.$notify({
          title: "添加商品成功",
          message: addGoodsRes.data.message,
          type: "success",
        });
        this.$router.push('/personal')
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped>
.pu {
  position: fixed;
  width: 100%;
  height: 100%;
  /* border: 1px solid black;
  margin: auto;
  margin-top: 100px; */
  background: white;
}
.pu1 {
  width: 100%;
  height: 80px;
  /* background: yellow; */
}
.pu2 {
  width: 200px;
  height: 80px;
  /* background: green; */
  float: left;
}
.pu3 {
  width: 180px;
  height: 20px;
  margin: 25px 30px;
  /* background: purple; */
  font-size: 30px;
  font-family: "楷体";
  color: red;
}
.pu4 {
  width: 230px;
  height: 20px;
  float: right;
  /* background: black; */
  font-family: "楷体";
  margin-right: 30px;
  margin-top: 30px;
}
.pu5 {
  width: 100%;
  height: 720px;
  /* background: black; */
}
.pu6 {
  width: 100%;
  height: 50px;
  /* background: wheat; */
}
.name /deep/.el-input__inner {
  width: 500px;
  height: 30px;
}

.pu7 {
  margin-top: 20px;
  width: 90px;
  height: 20px;
  margin-right: 130px;
  /* background: black; */
  float: right;
}
.desc /deep/ .el-textarea__inner {
  width: 500px;
  height: 200px;
}
.pu8 {
  float: right;
  width: 500px;
  height: 500px;
  margin-top: 50px;
  margin-right: 200px;
  /* background: black; */
}
.pu9 {
  float: left;
}
.pu10 {
  margin-top: 100px;
}
.pu11 /deep/ .el-tabs__nav {
  background: #d6ecf0;
}
</style>